<template>
  <!-- 尺寸控制 -->
  <div class="proportioncontrol" @mouseleave="sizeListOnOff(2)">
    <div class="proportioncontrollist">
      <div class="" @click="addsubClick(1)">
        <span class="iconfont icon-jiajian-1"></span>
      </div>
      <div @mouseenter="sizeListOnOff(1)" @click="sizeListOnOff(1)">
        {{ sizeStage }}
      </div>
      <div class="" @click="addsubClick(2)">
        <span class="iconfont icon-jiajian-"></span>
      </div>
    </div>
    <div
      class="size_list"
      v-show="sizeListSwitch"
      @mouseleave="sizeListOnOff(2)"
    >
      <div class="size_lists">
        <p
          @click="sizelistClick(item, i)"
          v-for="(item, i) in sizeList"
          :key="i"
          :class="sizeListSelect === i ? 'active' : ''"
        >
          {{ item }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
//vuex
import { mapState } from "vuex";
export default {
  data() {
    return {
      sizeListSelect: "",
      sizeStage: "",
      sizeListSwitch: false,
      //动态尺寸控制列表
      sizeList: [
        "15%",
        "25%",
        "50%",
        "75%",
        "100%",
        "125%",
        "150%",
        "175%",
        "200%",
        "300%",
        "400%",
        "适应屏幕",
        "实际大小",
      ],
      list: [0.15, 0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0, 3.0, 4.0],
    };
  },
  computed: {
    ...mapState("templateStage", [
      "backSize",
      "configKonva",
      "imgW",
      "imgH",
      "listImg",
      "listNote",
      "listEllipse",
      "listlogo"
    ]),
  },

  watch: {
    backSize() {
      let centage = this.$datatools.changePercentage(this.backSize);
      this.sizeStage = centage;
    },
  },
  methods: {
    //百分比选择条选中
    percentageSelection(num) {
      this.list.forEach((v, i) => {
        if (v == num) {
          this.sizeListSelect = i;
        }
      });
    },
    //百分比选择条是否打开
    sizeListOnOff(or) {
      if (or == 1) {
        let num = this.sizeStage.replace(/%/, "") / 100;
        this.percentageSelection(num);
        this.sizeListSwitch = true;
      } else {
        this.sizeListSwitch = false;
      }
    },
    //点击尺寸加减按钮
    addsubClick(or) {
      let v = this.sizeStage.replace(/%/, "") / 100;
      let num;
      let index;
      this.list.forEach((value, i) => {
        if (v == value) {
          if (or == 2) {
            return (index = i - 1);
          } else {
            return (index = i + 1);
          }
        } else if (v > value) {
          if (or == 2) {
            return (index = i);
          } else {
            return (index = i + 1);
          }
        }
      });
      if (index < 0) {
        index = 0;
      } else if (index > this.list.length - 1) {
        index = this.list.length - 1;
      }
      num = this.list[index];
      this.percentageSelection(num);
      this.sizeStage = num * 100 + "%";
      this.$store.commit("templateStage/CONFIGKONVAEDIT", num);
      this.updateElement();
    },
    //更新元素
    updateElement() {
      //刷新 图片、文本、图片、logo框
      this.listImg.forEach((v) => {
        this.$emit("loadele", v.config.name);
      });
      this.listNote.forEach((v) => {
        this.$emit("loadele", v.config.name);
      });
      this.listlogo.forEach((v) => {
        this.$emit("loadele", v.config.name);
      });
      this.listEllipse.forEach((v) => {
        this.$emit("loadele", v.config.name);
      });
    },
    //点击尺寸列表
    sizelistClick(item, i) {
      this.sizeListSelect = i;
      let v;
      let value;
      if (i < 11) {
        v = item.replace(/%/, "") / 100;
        value = item;
      } else if (i == 11) {
        v = this.backSize;
        value = this.$datatools.changePercentage(this.backSize);
      } else if (i == 12) {
        v = 1;
        value = "100%";
      }
      this.sizeStage = value;
      this.$store.commit("templateStage/CONFIGKONVAEDIT", v);
      this.updateElement();
    },
  },
  created() {
    this.sizeStage = this.$datatools.changePercentage(this.backSize);
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/frame.less";
@keyframes aaa {
  0% {
    opacity: 0;
    transform: translate3d(0, 10%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.proportioncontrol {
  position: fixed;
  right: 286px;
  bottom: 16px;
  z-index: 67;
  .proportioncontrollist {
    width: 130px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.604);
    border-radius: 14px;
    padding: 5px 8px;
    color: #fff;
    position: relative;
    z-index: 999;
    .divDSA();
    div {
      flex: 2;
      .cen();
    }
  }
  .size_list {
    color: #fff;
    animation: aaa 0.1s linear;
    position: absolute;
    // height: 40px;
    bottom: 26px;
    left: calc(12% / 2);
    width: 88%;
    border-bottom: transparent solid 14px;

    .size_lists {
      padding: 8px 0;
      border-radius: 4px;
      background-color: rgba(78, 74, 74, 0.604);
      p {
        height: 24px;
        // padding: 2px 4px;
        .cen();
        &:hover {
          background-color: rgba(78, 74, 74, 0.604);
        }
      }
      .active {
        color: #fff;
        background-color: rgba(19, 19, 18, 0.384);
      }
    }
  }
}
</style>